<template>
   <div>
      <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
         <!-- 多选框组 -->
         <el-checkbox-group v-model="roleIds">
            <!-- 要循环的选项：所有的角色 -->
            <!-- label 表示要存储的值 ,是该 checkbox 对应的值，若该标签中无内容，
            则该属性也充当 checkbox 按钮后的介绍-->
            <!-- 要显示角色名称，存储，角色id -->
            <el-checkbox
               v-for="item in list"
               :key="item.id"
               :label="item.id"
            >
               {{ item.name }}
            </el-checkbox>
         </el-checkbox-group>
         <!-- 定义footer插槽 -->
         <!-- 确定跟取消 -->
         <el-row type="flex" justify="center" slot="footer">
            <el-col :span="6">
               <el-button size="small" type="primary" @click="btnOK">
                  确定
               </el-button>
               <el-button size="small" @click="btnCancel">取消</el-button>
            </el-col>
         </el-row>
      </el-dialog>
   </div>
</template>

<script>
import { getRoleList } from '../../../api/setting'
import { getUserDetailById } from '../../../api/user'
import { assignRoles } from '../../../api/employees'
export default {
   props: {
      showRoleDialog: {
         type: Boolean,
         default: false
      },
      // 用户的id，点击需要给哪个用户处理角色，当前要处理的哪个用户
      userId: {
         type: String,
         default: null,
         required: true
      }
   },
   data() {
      return {
         // 存储当前所有的角色 id
         list: [],
         // 负责存储当前用户所拥有的角色 id
         roleIds: []
      }
   },
   created() {
      // 获取所有角色
      this.getRoleList()
   },
   methods: {
      // 获取角色列表
      async getRoleList() {
         // 默认只取 20 条数据,因为角色信息不可能太多
         const { rows } = await getRoleList({ page: 1, pagesize: 20 })
         this.list = rows
      },
      // 获取用户的基本信息,因为 props 传值是个异步的，所以这里不能用 this.userId
      // 这个方法是父组件调用的
      async getUserDetailById(id) {
         // 将用户所拥有的角色，赋值给当前用户的对象
         const { roleIds } = await getUserDetailById(id)
         this.roleIds = roleIds
      },
      // 确定
      async btnOK() {
         // 保存用户的角色
         await assignRoles({ id: this.userId, roleIds: this.roleIds })
         this.$message.success('修改角色信息成功')
         // 关闭弹层
         this.$emit('update:showRoleDialog', false)
         // this.$parent.showRoleDialog = false
      },
      // 取消
      btnCancel() {
         // 取消之前重置成空数组
         this.roleIds = []
         this.$emit('update:showRoleDialog', false)
      }
   }
}
</script>

<style lang="scss" scoped></style>
